<template>
	<view class="example">
		<form @submit="formSubmit">
			<view class="message">
				<view class="title">负责人</view>
				<input placeholder="请输入负责人名字" value="张三" class="content"></input>
			</view>
			<view class="message">
				<view class="title">身份证号</view>
				<input placeholder="请输入身份证号" value="43568763567778" class="content"></input>
			</view>
			<view class="message">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" value="12345678909" class="content"></input>
			</view>
			<!-- <view class="message">
				<view class="title">验证码</view>
				<input placeholder="请输入验证码" class="content"></input>
			</view> -->
			<view class="message">
				<view class="title">店名</view>
				<input placeholder="请输入店名" value="店小友" class="content"></input>
			</view>
			<view class="message">
				<view class="title">工商营业执照号码</view>
				<input placeholder="请输入工商营业执照号码" value="43568763567778" class="content"></input>
			</view>
			<view class="message">
				<view class="title">经营区域</view>
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="message">
				<view class="title">地址</view>
				<input placeholder="请输入地址" value="43568763567778" class="content"></input>
			</view>
			<view class="message">
				<view class="title">营业时间</view>
				<input placeholder="请选择时间段" :value="values2" class="content" @click="pickerAction2" disabled></input>
				<hbxw-time-range-picker :value="values2" :visible="showPicker2" :isShowType="false" delimiter="point"
					:isShowSecond="false" @change="pickerChange2" @cancel="pickerCancel2" @sure="pickerSure2" />
			</view>
			<view class="message">
				<view class="title">营业状态</view>
				<switch @change="switch2Change" />
			</view>
			<view class="introduce">
				<uni-easyinput type="textarea" placeholder="请输入内容" maxlength="-1"
					value="商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍"></uni-easyinput>
			</view>
			<view>
				<uni-file-picker limit="1" title="营业执照"></uni-file-picker>
				<uni-file-picker limit="2" title="身份证正反面"></uni-file-picker>
				<uni-file-picker limit="9" title="门店照片"></uni-file-picker>
			</view>
			<button class="button" @click="submit">保存</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//时间选择器
				showPicker2: false,
				values2: '08:06-20:09',
				value: 0,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
			}
		},
		methods: {
			formSubmit() {

			},
			change(e) {
				console.log("e:", e);
			},
			submit() {
				console.log("提交");
			},
			//时间选择器
			pickerAction2() {
				this.showPicker2 = true;
			},
			pickerCancel2() {
				this.showPicker2 = false;
			},
			pickerSure2(result) {
				console.log('---- pickerSure2 ----:', result);
				this.result = result;
				this.showPicker2 = false;
			},
			pickerChange2(result) {
				console.log('---- pickerChange2 ----:', result);
				this.result = result;
				this.values2 = result.valuesStr1;
			},
			//营业状态
			switch2Change: function(e) {
				console.log('switch2 发生 change 事件，携带值为', e.detail.value)
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.message {
		display: flex;
		height: 88rpx;
		line-height: 88rpx;
		padding: 16rpx 0;
		border-bottom: 2rpx solid #BBBBBB;
	}

	.example {
		padding: 30rpx;
		background-color: #fff;
	}

	.title {
		width: 252rpx;
		font-size: 28rpx;
	}

	.content {
		width: 396rpx;
		height: 88rpx;
		/* text-align: center; */
		line-height: 88rpx;
		padding-left: 10rpx;
		border: 2rpx solid #EFEFEF;
	}

	.introduce {
		display: flex;
		margin: 40rpx 0;
	}

	.introduce>.content {
		border: 2rpx solid #BBBBBB;
	}

	.button-item {
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	img {
		width: 278rpx;
		height: 154rpx;
	}

	.button {
		margin-top: 30rpx;
		width: 90%;
		background-color: #007aff;
		color: #fff;
		/* position: absolute; */
		/* left: 15%; */
		/* bottom: 50rpx; */
	}
</style>